<template>
    <div class="p-2">
        <transition :enter-active-class="proxy?.animate.searchAnimate.enter"
            :leave-active-class="proxy?.animate.searchAnimate.leave">
            <div class="search">
                <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
                    <el-form-item label="模糊搜索" prop="welfareName">
                        <el-input v-model="queryParams.welfareName" placeholder="请输入" clearable />
                    </el-form-item>
                    <el-form-item label="客户星级" prop="lowLevel">
                        <el-select v-model="queryParams.lowLevel" placeholder="请选择" clearable filterable >
                            <el-option v-for="item in levelOption" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="审批状态" prop="productStatus">
                        <el-select v-model="queryParams.productStatus" placeholder="请选择">
                            <el-option label="未审批" value="0"></el-option>
                            <el-option label="已通过" value="1"></el-option>
                            <el-option label="已拒绝" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
        </transition>
        <el-card shadow="never">
            <el-table :data="applyList" v-loading="loading">
                <el-table-column label="申请时间" prop="applyDate" align="center" width="160"></el-table-column>
                <el-table-column label="申请人" prop="applyPersonName" align="center"></el-table-column>
                <el-table-column label="申请客户" prop="applyCustomer" align="center" width="120"></el-table-column>
                <el-table-column label="客户星级" align="customerName">
                    <template #default="scope">
                        <span class="level-one" v-if="scope.row.level == 1">一级客户</span>
                        <span class="level-two" v-else-if="scope.row.level == 2">二级客户</span>
                        <span class="level-three" v-else-if="scope.row.level == 3">三级客户</span>
                        <span class="level-four" v-else-if="scope.row.level == 4">四级客户</span>
                        <span class="level-five" v-else-if="scope.row.level == 5">五级客户</span>
                    </template>
                </el-table-column>
                <el-table-column label="客户来源" align="center">
                    <template #default="scope">
                        <span>
                            {{ customer_source.filter((item:any)=>item.value == scope.row.applySource)[0]?.label }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column label="申请样品" prop="welfareName" align="center" width="200"></el-table-column>
                <el-table-column label="申请数量" prop="applyNum" align="center"></el-table-column>
                <el-table-column label="剩余库存" align="center">
                    <template #default="scope">
                        <span>{{ scope.row.inventory || 0 }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="关联订单编号" prop="orderNumber" align="center" width="190"></el-table-column>
                <el-table-column label="审批状态" align="center">
                    <template #default="scope">
                        <span class="unexamine" v-if="scope.row.approvalStatus == '1'">未审批</span>
                        <span class="approved" v-else-if="scope.row.approvalStatus == '2'">已通过</span>
                        <span class="rejected" v-else-if="scope.row.approvalStatus == '3'">已拒绝</span>
                    </template>
                </el-table-column>
                <el-table-column label="物流单号" prop="logisticsNumber" align="center"></el-table-column>
                <el-table-column label="操作" align="center">
                    <template #default="scope">
                        <el-tooltip content="审批" placement="top" v-if="scope.row.approvalStatus == '1'">
                            <el-button link :style="{fontSize:'16px'}" type="primary" icon="Document" @click="handleClickExamine(scope.row)" ></el-button>
                        </el-tooltip>
                        <el-tooltip content="历史记录" placement="top">
                            <el-button link :style="{fontSize:'16px'}" type="warning" icon="Clock" @click="handleClickHistory(scope.row)"></el-button>
                        </el-tooltip>
                        <el-tooltip content="删除" placement="top">
                            <el-button link :style="{fontSize:'16px'}" type="danger" icon="Delete" @click="handleClickDelete(scope.row)"></el-button>                        
                        </el-tooltip>
                        <el-tooltip content="添加单号" placement="top">
                            <el-button link :style="{fontSize:'16px'}" type="success" icon="DocumentAdd" @click="handleClickAddOrder(scope.row)"></el-button>                        
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
            <pagination v-show="totalData > 0" :total="totalData" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
                @pagination="getWelfareApplyList" />
        </el-card>
        <simpleExamine :visible="examineVisible" :data="examinedApply" :sources="customer_source" @submit="handleSubmitExamine" @close="handleCancelExamine" />
        <simpleHistory :visible="historyRecordVisible" :data="checkedApply" :record="recordList" @close="handleCancelHistory" />
        <addOrderNumber :visible="addOrderVisible" :data="addedApply" @submit="handleSubmitAddOrder" @close="handleCancelAddOrder" />
    </div>
</template>

<script setup lang="ts">
import type { FormInstance } from 'element-plus';
import { simpleExamineVO } from '@/api/sj/simpleExamine-crm/types';
import simpleExamine from './components/simpleExamine.vue';
import simpleHistory from './components/simpleHistory.vue';
import addOrderNumber from './components/addOrderNumber.vue';
import { getApplyListApi,getWelfareByIdApi,deleteWelfareApi,getApplyRecordApi } from '@/api/sj/welfareExamine-crm/index';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { customer_source } = toRefs<any>(proxy?.useDict('customer_source'));
const queryFormRef = ref<FormInstance>();
const levelOption = [
    {label:'一星',value:1},
    {label:'二星',value:2},
    {label:'三星',value:3},
    {label:'四星',value:4},
    {label:'五星',value:5},
];
const data = reactive({
    queryParams: {
        pageNum: 1,
        pageSize: 10,
        welfareName: undefined,
        productStatus: undefined,
        lowLevel: undefined,
        type: 1
    },
});
const { queryParams } = toRefs(data);
const applyList = ref<simpleExamineVO[]>([]);
const loading = ref(false);
const totalData = ref(0);
const examineVisible = ref(false);
const examinedApply = ref<simpleExamineVO>();
const historyRecordVisible = ref(false);
const checkedApply = ref<simpleExamineVO>();
const addOrderVisible = ref(false);
const addedApply = ref<simpleExamineVO>();
const recordList = ref<any[]>([]);

const getWelfareApplyList = async () => {
    loading.value = true;
    const {total,rows} = await getApplyListApi(queryParams.value);
    applyList.value = rows;
    totalData.value = total;
    loading.value = false;
};


/** 点击审批 */
const handleClickExamine = async (row:simpleExamineVO)=>{
    const { code, data } = await getWelfareByIdApi(row.id);
    if(code == 200){
        examinedApply.value = data;
        examineVisible.value = true;
    };
};

const handleSubmitExamine = (result: boolean) => {
    if(result){
        getWelfareApplyList();
    };
};

/**关闭审批 */
const handleCancelExamine = ()=>{
    examineVisible.value = false;
    examinedApply.value = {};
};

/** 点击查看申请历史 */
const handleClickHistory = async (row:simpleExamineVO)=>{
    checkedApply.value = row;
    const params = {
        customerId: row.customerId,
        type: '1'
    };
    const {code, data} = await getApplyRecordApi(params);
    if(code == 200){
        recordList.value = data;
        historyRecordVisible.value = true;
    };
};

/** 关闭查看申请历史 */
const handleCancelHistory = ()=>{
    historyRecordVisible.value = false;
    checkedApply.value = {};
};

/** 点击删除 */
const handleClickDelete = async (row:simpleExamineVO)=>{
    if(row.approvalStatus == '1'){
        proxy?.$modal.msgWarning("此条信息还未审批，请先审批后再删除");
    }else{
        await proxy?.$modal.confirm('确定删除此条信息?');
        const { code } = await deleteWelfareApi(row.id);
        if(code == 200){
            proxy?.$modal.msgSuccess("删除成功");
            getWelfareApplyList();
        };
    };
};

/** 点击添加单号 */
const handleClickAddOrder = (row:simpleExamineVO)=>{
    addedApply.value = row;
    addOrderVisible.value = true;
};

const handleSubmitAddOrder = (result: boolean) => {
    if(result){
        getWelfareApplyList();
    }
};

/** 点击关闭添加单号 */
const handleCancelAddOrder = ()=>{
    addedApply.value = {};
    addOrderVisible.value = false;
};

onMounted(()=>{
    getWelfareApplyList();
});

</script>

<style lang="scss" scoped>
.el-table{
    font-size:14px;
    .status{
        line-height: 13;
    }
    .level-one,.level-two {
        color:yellowgreen
    }
    .level-three,.level-four{
        color: orange;
    }
    .level-five{
        color: red
    }
    .unexamine{
        color: orange;
    }
    .approved{
        color: yellowgreen
    }
    .rejected{
        color:red;
    }
    ::v-deep(.el-button)
    {
        font-size: 13px !important;
    }
}

</style>